import React, { memo, useRef, useState } from 'react'
import { ItemWrapper } from './style'
import { Rate, Carousel } from 'antd'
import IconArrowLeft from '@/assets/svg/icon-arrow-left'
import IconArrowRight from '@/assets/svg/icon-arrow-right'
import Indicator from '../indicator'
import classNames from 'classnames'

const RoomItem = memo((props) => {
  // item 通过 itemWidth 达到动态宽度的效果
  const { itemData, itemWidth = '25%', itemClick } = props
  // 当前选中的图片
  const [selectIndex, setSelectIndex] = useState(0)
  const sliderRef = useRef()

  // 轮播图切换
  function handleBtnClick(isRight = true, event) {
    isRight ? sliderRef.current.next() : sliderRef.current.prev()

    // 记录索引
    let newIndex = isRight ? selectIndex + 1 : selectIndex - 1
    // 越界判断
    const length = itemData.picture_urls.length
    if (newIndex < 0) {
      newIndex = length - 1
    } else if (newIndex > length - 1) {
      newIndex = 0
    }
    setSelectIndex(newIndex)

    // 阻止事件冒泡
    event.stopPropagation()
  }

  function handleItemClick() {
    if (itemClick) {
      itemClick(itemData)
    }
  }

  // 显示图片还是轮播图
  const pictureElement = (
    <div className="cover">
      <img src={itemData.picture_url} alt="" />
    </div>
  )

  const sliderElement = (
    <div className="slider">
      {/* 左右箭头 */}
      <div className="control">
        <div className="btn left" onClick={(event) => handleBtnClick(false, event)}>
          <IconArrowLeft width={'22px'} height={'22px'} />
        </div>
        <div className="btn right" onClick={(event) => handleBtnClick(true, event)}>
          <IconArrowRight width={'22px'} height={'22px'} />
        </div>
      </div>
      {/* 指示器 */}
      <div className="indicator">
        <Indicator selectIndex={selectIndex}>
          {itemData?.picture_urls?.map((item, index) => {
            return (
              <div className="item" key={item}>
                <span className={classNames('dot', { active: selectIndex === index })}></span>
              </div>
            )
          })}
        </Indicator>
      </div>
      {/* 轮播图 */}
      <Carousel dots={false} ref={sliderRef}>
        {itemData?.picture_urls?.map((item) => {
          return (
            <div className="cover" key={item}>
              <img src={item} alt="" />
            </div>
          )
        })}
      </Carousel>
    </div>
  )

  return (
    // 使用 styled-components 的 transient props 语法,在属性名前加 $ 前缀
    // 同时需要修改 ./style 文件中的样式定义: width: ${props => props.$itemWidth};
    <ItemWrapper $verifyColor={itemData?.verify_info?.text_color || '#39576a'} $itemWidth={itemWidth} onClick={handleItemClick}>
      <div className="inner">
        {/* 确定显示图片还是轮播图 */}
        {itemData.picture_urls ? sliderElement : pictureElement}
        <div className="desc">{itemData.verify_info.messages.join(' · ')}</div>
        <div className="name">{itemData.name}</div>
        <div className="price">¥{itemData.price}/晚</div>
        <div className="bottom">
          <Rate allowHalf disabled value={itemData.star_rating ?? 5} style={{ fontSize: '12px', color: '#ff385c' }} />
          <span className="count">{itemData.reviews_count}</span>
          {itemData.bottom_info && <span className="extra">·{itemData.bottom_info?.content}</span>}
        </div>
      </div>
    </ItemWrapper>
  )
})

export default RoomItem
